<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header/>

    <main>
      <form @submit.prevent="savePlcConfig" id="plc-config-form" class="config-form">
        <h2 class="form-title">PLC 配置</h2>

        <div class="form-section">
          <h3 class="form-section-title">基本信息</h3>
          <div class="grid grid-cols-3 gap-x-4 gap-y-2">
            <div class="form-group">
              <label for="line-id" class="form-label">线别 <span class="text-red-500">*</span></label>
              <input type="text" id="line-id" v-model="plcConfig.lineId" class="form-input"
                     placeholder="例如: Y-FA-01" required>
            </div>
            <div class="form-group">
              <label for="station-id" class="form-label">站别 <span class="text-red-500">*</span></label>
              <input type="text" id="station-id" v-model="plcConfig.stationId" class="form-input"
                     placeholder="例如: StatorWind" required>
            </div>
            <div class="form-group">
              <label for="machine-id" class="form-label">机台 <span class="text-red-500">*</span></label>
              <input type="text" id="machine-id" v-model="plcConfig.machineId" class="form-input"
                     placeholder="例如: WIND01" required>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">连接设置</h3>
          <div class="grid grid-cols-2 gap-x-4 gap-y-2">
            <div class="form-group">
              <label for="plc-ip" class="form-label">IP 地址 <span class="text-red-500">*</span></label>
              <input type="text" id="plc-ip" v-model="plcConfig.ip" class="form-input"
                     placeholder="例如: 192.168.10.110" required pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}">
            </div>
            <div class="form-group">
              <label for="plc-port" class="form-label">端口 <span class="text-red-500">*</span></label>
              <input type="number" id="plc-port" v-model.number="plcConfig.port" class="form-input"
                     placeholder="例如: 10001" required min="1" max="65535">
            </div>
            <div class="form-group col-span-2">
              <label for="plc-protocol" class="form-label">通讯协议</label>
              <select id="plc-protocol" v-model="plcConfig.protocol" class="form-select">
                <option value="Modbus TCP">Modbus TCP</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">PLC 心跳设置</h3>
          <div class="form-group">
            <div class="toggle-switch">
              <span class="toggle-label">启用 PLC 心跳</span>
              <label class="switch">
                <input type="checkbox" id="heartbeat-enabled" v-model="plcConfig.heartbeatEnabled">
                <span class="slider" :class="{ 'checked': plcConfig.heartbeatEnabled }"></span>
              </label>
            </div>
            <p class="form-description">是否启用与 PLC 的定时心跳检测。</p>
          </div>
          <div v-if="plcConfig.heartbeatEnabled" id="heartbeat-fields-group" class="grid grid-cols-2 gap-x-4 gap-y-2">
            <div class="form-group">
              <label for="heartbeat-address" class="form-label">心跳地址 <span class="text-red-500">*</span></label>
              <input type="text" id="heartbeat-address" v-model="plcConfig.heartbeatAddress" class="form-input"
                     placeholder="例如: MW1000" :required="plcConfig.heartbeatEnabled">
              <p class="form-description">用于读写心跳信号的地址。</p>
            </div>
            <div class="form-group">
              <label for="heartbeat-frequency" class="form-label">心跳频率 (秒) <span
                  class="text-red-500">*</span></label>
              <input type="number" id="heartbeat-frequency" v-model.number="plcConfig.heartbeatFrequency"
                     class="form-input" value="5" min="1" max="60" :required="plcConfig.heartbeatEnabled">
              <p class="form-description">交换心跳信号的间隔。</p>
            </div>
          </div>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">流程模板</h3>
          <div class="form-group">
            <div class="input-button-group">
              <input type="text" class="form-input" value="双工位精密排线绕线机" readonly>
              <button type="button" id="btn-view-flowchart" @click="viewFlowchart"
                      class="hmi-button hmi-button-small hmi-button-secondary">
                <i class="fas fa-project-diagram"></i> 查看
              </button>
            </div>
            <p class="form-description">当前设备: 双工位精密排线绕线机</p>
          </div>
        </div>

        <div id="flow-address-config-section" class="form-section">
          <h3 class="form-section-title">流程与工位地址配置</h3>
          <p class="form-description mb-2">请为绕线机配置所需的 PLC 地址。</p>

          <div id="station-address-grid" class="station-address-grid grid-cols-2">
            <div class="station-column">
              <h4 class="text-sm font-semibold mb-1 pb-0.5 border-b border-[var(--border-color)]">工位 1 地址</h4>
              <div class="form-group" v-for="req in flowAddressRequirements.WindingMachine.roles"
                   :key="'station1_' + req.name">
                <label :for="'flow-addr-station1_' + req.name" class="form-label">{{ req.label }} <span
                    class="text-red-500">*</span></label>
                <input type="text" :id="'flow-addr-station1_' + req.name"
                       v-model="plcConfig.flowAddresses.WindingMachine['station1_' + req.name]"
                       class="form-input" :placeholder="req.placeholder" required>
              </div>
            </div>

            <div class="station-column">
              <h4 class="text-sm font-semibold mb-1 pb-0.5 border-b border-[var(--border-color)]">工位 2 地址</h4>
              <div class="form-group" v-for="req in flowAddressRequirements.WindingMachine.roles"
                   :key="'station2_' + req.name">
                <label :for="'flow-addr-station2_' + req.name" class="form-label">{{ req.label }} <span
                    class="text-red-500">*</span></label>
                <input type="text" :id="'flow-addr-station2_' + req.name"
                       v-model="plcConfig.flowAddresses.WindingMachine['station2_' + req.name]"
                       class="form-input" :placeholder="req.placeholder" required>
              </div>
            </div>
          </div>
        </div>


        <div class="button-group">
          <button type="button" id="btn-cancel-config" @click="goBack" class="hmi-button hmi-button-secondary">
            <i class="fas fa-times"></i>关闭
          </button>
          <button type="submit" id="btn-save-config" class="hmi-button hmi-button-primary" :disabled="isSaving">
            <i :class="isSaving ? 'fas fa-spinner fa-spin' : 'fas fa-save'"></i>{{
              isSaving ? '保存中...' : '保存配置'
            }}
          </button>
        </div>
      </form>
    </main>

    <div v-if="notification.show" id="notification" class="notification"
         :class="{ 'notification-success': notification.type === 'success', 'notification-error': notification.type === 'error', 'show': notification.show }">
      <span id="notification-message">{{ notification.message }}</span>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, onBeforeUnmount, watch, computed} from 'vue';
import {useRouter, onBeforeRouteLeave} from 'vue-router';

const router = useRouter(); // 获取路由实例

import {getPlcInfo, savePlcInfo} from '@/api/plc';

// 初始化带有默认值的 plcConfig
const plcConfig = reactive({
  lineId: '',
  stationId: '',
  machineId: '',
  deviceName: '',
  ip: '127.0.0.1',
  port: 502,
  protocol: 'Modbus TCP',
  processTemplate: 'WindingMachine',
  heartbeatEnabled: true,
  heartbeatFrequency: 5,
  heartbeatAddress: 'MW1000',
  flowAddresses: {
    WindingMachine: {
      station1_scanData: '',
      station1_scanUpload: '',
      station1_mesJudgment: '',
      station1_processComplete: '',
      station1_processResult: '',
      station1_dataTrigger: '',
      station1_duplicateCheck: '',
      station2_scanData: '',
      station2_scanUpload: '',
      station2_mesJudgment: '',
      station2_processComplete: '',
      station2_processResult: '',
      station2_dataTrigger: '',
      station2_duplicateCheck: ''
    }
  }
});

// 用于跟踪表单是否有未保存的更改
const isSaving = ref(false); // 用于控制保存按钮的加载状态

// 通知状态
const notification = reactive({
  show: false,
  message: '',
  type: 'success', // 'success' or 'error'
  timeoutId: null // 用于存储定时器ID
});

// 流程地址要求定义 (与原 HTML JS 中的定义一致)
const flowAddressRequirements = {
  WindingMachine: {
    isDualStation: true,
    deviceName: '双工位精密排线绕线机',
    roles: [
      {
        name: 'scanData',
        label: '扫码枪数据',
        placeholder: '例如: MW8100/MW8150',
        defaultValue1: 'MW8100',
        defaultValue2: 'MW8150',
        description: '当前扫码数据30个字符'
      },
      {
        name: 'scanUpload',
        label: '扫码数据上传',
        placeholder: '例如: MW8130/MW8180',
        defaultValue1: 'MW8130',
        defaultValue2: 'MW8180',
        description: '赋值(1)给MES进行扫码数据读取,MES读取成功后赋值(0)返回给工位代表MES读取扫码数据成功,10秒内MES没有返回赋值数据给工位代表扫码数据读取失败'
      },
      {
        name: 'mesJudgment',
        label: 'MES扫码数据判断',
        placeholder: '例如: MW8132/MW8182',
        defaultValue1: 'MW8132',
        defaultValue2: 'MW8182',
        description: '读取MES给工位当前条码数据是否可做: 1=扫码OK, 2=当前扫码产品重复扫码, 3=上一工序未执行或产品不合格, 4=当前扫码数据与生产工单不符合, 5=扫码数据丢失或扫码数据异常, 6=扫码条码产品二次返工, 7=当前产品不能进行二次返工'
      },
      {
        name: 'processComplete',
        label: '设备生产完成握手信号',
        placeholder: '例如: MW8140/MW8190',
        defaultValue1: 'MW8140',
        defaultValue2: 'MW8190',
        description: '设备完成后赋值1给MES进行产品OK/NG信息读取'
      },
      {
        name: 'processResult',
        label: '生产完成结果赋值',
        placeholder: '例如: MW8144/MW8194',
        defaultValue1: 'MW8144',
        defaultValue2: 'MW8194',
        description: '设备完成后OK=1 NG=2 通知上位机做OK/NG产品计数'
      },
      {
        name: 'dataTrigger',
        label: '数据判断触发',
        placeholder: '例如: MW8146/MW8196',
        defaultValue1: 'MW8146',
        defaultValue2: 'MW8196',
        description: '赋值(1)给MES进行扫码数据判断,扫码数据判断完成后赋值(0)给工位'
      },
      {
        name: 'duplicateCheck',
        label: '重码判断',
        placeholder: '例如: MW8148/MW8198',
        defaultValue1: 'MW8148',
        defaultValue2: 'MW8198',
        description: '绕线-上传当前产品扫码数据-MES-重码检测判断'
      }
    ]
  }
};

// --- 方法 ---

// 显示通知
const showNotification = (message, type = 'success') => {
  notification.show = true;
  notification.message = message;
  notification.type = type;
  if (notification.timeoutId) {
    clearTimeout(notification.timeoutId);
  }
  notification.timeoutId = setTimeout(() => {
    notification.show = false;
  }, 3000);
};

// 加载 PLC 配置 (模拟从后端获取)
const loadPlcConfig = async () => {
  try {
    const result = await getPlcInfo()
    Object.assign(plcConfig, result)
  } catch (error) {
    console.error('加载PLC配置失败:', error);
    showNotification(`加载配置失败: ${error.message}`, 'error');
  }
};

// 保存 PLC 配置
const savePlcConfig = async () => {
  const form = document.getElementById('plc-config-form');
  if (!form || !form.checkValidity()) {
    showNotification('请填写所有必填项 (*)', 'error');
    if (form) form.reportValidity();
    return;
  }
  isSaving.value = true;

  // 构建要保存的数据对象 - 确保是纯粹的可序列化对象
  const dataToSave = {
    lineId: plcConfig.lineId ? plcConfig.lineId.trim() : '',
    stationId: plcConfig.stationId ? plcConfig.stationId.trim() : '',
    machineId: plcConfig.machineId ? plcConfig.machineId.trim() : '',
    ip: plcConfig.ip ? plcConfig.ip.trim() : '',
    port: plcConfig.port ? parseInt(plcConfig.port) : 10001,
    protocol: plcConfig.protocol || 'Modbus TCP',
    heartbeatEnabled: Boolean(plcConfig.heartbeatEnabled),
    heartbeatAddress: plcConfig.heartbeatEnabled && plcConfig.heartbeatAddress ? plcConfig.heartbeatAddress.trim() : null,
    heartbeatFrequency: plcConfig.heartbeatEnabled && plcConfig.heartbeatFrequency ? parseInt(plcConfig.heartbeatFrequency) : null,
    processTemplate: plcConfig.processTemplate || 'WindingMachine',
    updatedAt: new Date().toISOString()
  };

  // 单独处理 flowAddresses，确保所有属性都是简单值
  dataToSave.flowAddresses = {};
  if (plcConfig.flowAddresses && plcConfig.processTemplate) {
    // 只复制当前选择的流程模板
    const templateAddresses = plcConfig.flowAddresses[plcConfig.processTemplate];
    if (templateAddresses) {
      dataToSave.flowAddresses[plcConfig.processTemplate] = {};
      // 手动复制每个属性，确保它们都是简单类型
      for (const key in templateAddresses) {
        if (Object.prototype.hasOwnProperty.call(templateAddresses, key)) {
          const value = templateAddresses[key];
          // 只保存字符串或数字类型的值
          if (typeof value === 'string' || typeof value === 'number') {
            dataToSave.flowAddresses[plcConfig.processTemplate][key] = value;
          } else if (value !== null && value !== undefined) {
            // 将其他类型转换为字符串
            dataToSave.flowAddresses[plcConfig.processTemplate][key] = String(value);
          }
        }
      }
    }
  }
  console.log('准备保存PLC配置:', JSON.stringify(dataToSave));
  savePlcInfo(dataToSave).then(res => {
    showNotification('PLC配置保存成功!', 'success');
    goBack()
  })
};

// 导航回上一页，检查未保存更改
const goBack = () => {
  router.back(); // 使用 Vue Router 返回上一页
};

// 导航到流程图查看页面
const viewFlowchart = () => {
  router.push(`/settings/plc-config/flowchart/WindingMachine`);
};

// 确保流程地址配置完整
const ensureFlowAddressesComplete = () => {
  if (plcConfig.processTemplate && flowAddressRequirements[plcConfig.processTemplate]) {
    if (!plcConfig.flowAddresses[plcConfig.processTemplate]) {
      plcConfig.flowAddresses[plcConfig.processTemplate] = {};
    }

    // 确保所有角色地址属性都存在
    const templateConfig = flowAddressRequirements[plcConfig.processTemplate];
    templateConfig.roles.forEach(req => {
      if (templateConfig.isDualStation) {
        const name1 = `station1_${req.name}`;
        const name2 = `station2_${req.name}`;
        if (plcConfig.flowAddresses[plcConfig.processTemplate][name1] === undefined) {
          plcConfig.flowAddresses[plcConfig.processTemplate][name1] = req.defaultValue1 || '';
        }
        if (plcConfig.flowAddresses[plcConfig.processTemplate][name2] === undefined) {
          plcConfig.flowAddresses[plcConfig.processTemplate][name2] = req.defaultValue2 || '';
        }
      } else {
        const name = `station1_${req.name}`;
        if (plcConfig.flowAddresses[plcConfig.processTemplate][name] === undefined) {
          plcConfig.flowAddresses[plcConfig.processTemplate][name] = req.defaultValue || '';
        }
      }
    });
  }
};

// --- Watchers ---
watch(plcConfig, (newValue) => {
  // 排除 isSaving 状态变化导致的 watch 触发
  if (isSaving.value) return;
  // 这样 v-model 绑定才不会出错
  if (newValue.processTemplate && flowAddressRequirements[newValue.processTemplate]) {
    if (!plcConfig.flowAddresses[newValue.processTemplate]) {
      // 使用 $set 或 spread 语法来确保新增属性是响应式的 (对于reactive对象直接赋值即可)
      // 如果 plcConfig 是 ref(object)，需要 plcConfig.value.flowAddresses[newValue.processTemplate] = {}
      plcConfig.flowAddresses[newValue.processTemplate] = plcConfig.flowAddresses[newValue.processTemplate] || {};
    }
    // 确保新模板的所有角色地址属性都存在，即使为空字符串
    const templateConfig = flowAddressRequirements[newValue.processTemplate];
    templateConfig.roles.forEach(req => {
      if (templateConfig.isDualStation) {
        const name1 = `station1_${req.name}`;
        const name2 = `station2_${req.name}`;
        if (plcConfig.flowAddresses[newValue.processTemplate][name1] === undefined) {
          plcConfig.flowAddresses[newValue.processTemplate][name1] = req.defaultValue1 || '';
        }
        if (plcConfig.flowAddresses[newValue.processTemplate][name2] === undefined) {
          plcConfig.flowAddresses[newValue.processTemplate][name2] = req.defaultValue2 || '';
        }
      } else {
        const name = `station1_${req.name}`;
        if (plcConfig.flowAddresses[newValue.processTemplate][name] === undefined) {
          plcConfig.flowAddresses[newValue.processTemplate][name] = req.defaultValue || '';
        }
      }
    });
  }

}, {deep: true}); // 深度监听 plcConfig 对象的所有属性


// --- Vue Router 导航守卫 ---
// 在路由离开前检查是否有未保存更改
onBeforeRouteLeave((to, from, next) => {
  next(); // 没有更改，允许离开
});


// --- 生命周期钩子 ---
onMounted(() => {
  console.log('PLC Config Page mounted');
  // 确保流程地址初始化完整
  ensureFlowAddressesComplete();
  // 页面挂载后加载配置数据
  loadPlcConfig();
});

onBeforeUnmount(() => {
  // 清理通知定时器
  if (notification.timeoutId) {
    clearTimeout(notification.timeoutId);
  }
});

</script>

<style scoped>
body { /* 这里的body样式在Vue组件的根div上可能不适用，通常由父组件或全局App.vue控制 */
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* --- Header (Consistent) --- */
/* Header 样式已移至 AppHeader.vue 或全局 */


/* --- Main Content Area --- */
main {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto; /* Enable scrolling for form */
}

/* --- Configuration Form --- */
.config-form {
  background-color: var(--bg-secondary);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  max-width: 1000px; /* Increased width to accommodate more fields */
  margin: 0 auto; /* Center form */
}

.form-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.form-section {
  margin-bottom: 1.5rem;
}

.form-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--accent-blue);
  padding-left: 0.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #f9fafb;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  background-color: white;
}

.form-input:required:invalid, .form-select:required:invalid {
  border-color: var(--status-red);
}

.form-input[readonly] {
  background-color: #e5e7eb;
  cursor: not-allowed;
  opacity: 0.7;
  color: var(--text-secondary);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3csvg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-description {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

/* Input group for select + button */
.input-button-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.input-button-group .form-select {
  flex-grow: 1;
}

/* Ensure button doesn't shrink */
.input-button-group .hmi-button {
  flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toggle-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Apply background color based on checked state in Vue with binding */
.slider.checked {
  background-color: var(--accent-blue);
}

/* Apply transform based on checked state in Vue with binding */
/* input:checked + .slider:before { transform: translateX(20px); } */

/* Station Address Configuration */
.station-address-grid {
  display: grid;
  /* grid-template-columns handled by Vue binding based on isDualStation */
  gap: 1.5rem; /* Gap between station columns */
  margin-top: 0.5rem;
}

.station-column h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-color);
}

/* --- Buttons --- */
.button-group {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
}

.hmi-button {
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Adjusted padding for small button */
.hmi-button-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.hmi-button i {
  font-size: 1em;
}

/* HMI Button Colors - Defined by variables */
.hmi-button-primary {
  background-color: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.hmi-button-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* Specific hover color */
.hmi-button-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.hmi-button-secondary:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

/* Specific hover color */
.hmi-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Notification --- */
.notification {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.notification.show {
  opacity: 1;
  visibility: visible;
}

/* Notification Colors - Defined by variables */
.notification-success {
  background-color: var(--status-green);
}

.notification-error {
  background-color: var(--status-red);
}


/* Body styles from original inline style */
/* max-width: 800px; max-height: 600px; margin: auto; */
/* These should ideally be managed in a layout component or App.vue */

</style>
